<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>axios基本使用</title>
    <!-- 导入 axios -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
  </head>
  <body>
    <button>点击发送 GET 请求</button>
    <button>点击发送 POST 请求</button>
    <button>点击发送 PUT 请求</button>
    <button>点击发送 PATCH 请求</button>
    <button>点击发送 DELETE 请求</button>
    <script>
      //获取所有的按钮
      let btns = document.querySelectorAll("button");

      //第一个按钮绑定事件
      btns[0].onclick = async function () {
        try {
          //使用 axios 发送 AJAX 请求,  参数: 配置对象
          let response = await axios({
            //请求类型
            method: "get", // method 如果不设置, 默认为 get 请求
            //请求的 URL    属性是必填属性, 其他属性都是『可选的』
            url: "http://127.0.0.1:3000/book",
          });
          //输出成功的结果值
          console.log(response);
        } catch (e) {
          console.log(e);
        }
      };

      //第二个按钮
      btns[1].onclick = async function () {
        try {
          //新增图书
          let result = await axios({
            method: "post",
            url: "http://127.0.0.1:3000/book",
            //请求体
            data: {
              title: "三体",
              price: 25.9,
            },
          });
          //输出成功的结果值
          console.log(result);
        } catch (e) {
          console.error("请求失败~~~");
        }
      };

      //第三个按钮
      btns[2].onclick = async function () {
        //18 价格改为 45.9  添加作者
        try {
          let result = await axios({
            method: "put", //请求方法  大小写都是可以的
            url: "http://127.0.0.1:3000/book/18",
            data: {
              price: 45.9,
              author: "刘慈欣",
            },
          });
        } catch (e) {
          console.log("请求失败~~~");
        }
      };

      //第三个按钮
      btns[3].onclick = async function () {
        //18 价格改为 45.9  添加作者
        try {
          let result = await axios({
            method: "patch", //请求方法  大小写都是可以的
            url: "http://127.0.0.1:3000/book/18",
            data: {
              price: 45.9,
              author: "刘慈欣",
            },
          });
        } catch (e) {
          console.log("请求失败~~~");
        }
      };

      //
      btns[4].onclick = async function () {
        try {
          await axios({
            method: "delete",
            url: "http://127.0.0.1:3000/book/22",
          });
          //提示
          console.log("删除成功");
        } catch (e) {
          console.log("删除失败~~~");
        }
      };
    </script>
  </body>
</html>
